<template>
  <div class="container" v-if="data">
     <div class="friends" v-for="item in data.list" :key="item.id">
       <div class="left" @click="$router.push({name: 'NewsUser', params: { user_id: `${item.foller_id}` }})">
          <el-avatar :size="65" :src="item.fans.avatar"></el-avatar>
       </div>
       <div class="center">
         <p class="name" @click="$router.push({name: 'NewsUser', params: { user_id: `${item.foller_id}` }})">{{item.fans.nickname}}</p>
         <p>{{'数据库未设置字段---'}}TA很懒，还没有添加简介</p>
       </div>
       <div class="right" >
          <!-- <el-button type="primary" size="small" @click="clickBtn(item)">{{!item.friends ? '回关' : '互相关注'}}</el-button> -->
       </div>
     </div>
  </div>
</template>

<script>
import { addUserFollowings,deleteUserFollowings,isWage} from "@/api/news/pc-web/user";
export default {
  name: "Friends",
  props:{
    data: Object,
    required: true,
    default: function () {
        return {}
    }
  },
  data() {
    return {
      isFans: true,
    }
  },
  methods: {
    // 粉丝用户按钮
      async clickBtn(item){
        if(this.isFans){
          const res = await this.isWage(item.foller_id)
          if(res){
             await deleteUserFollowings(item.foller_id)
             this.$message.success('已取消关注该粉丝')
            }else{
              await addUserFollowings({follerd_id:item.foller_id})
              this.$message.success('回粉成功，已互相关注')
            }
        }
      },
      // 判断是否已经关注
      async isWage(id){
        return await isWage(id)
      },
  },
};
</script>
<style lang="scss" scoped>
.left,.name{cursor:pointer;  }
.friends{
  border-bottom: 1px solid #eee;
  padding: 20px 0;
  width: 100%;
  display:flex;
  .left{
  width: 70px;
  }
  .center{
  margin:10px 30px 0 20px;
  // width: 526px;
  width: 100%;
  p{
  margin:0;
  }
   p:nth-child(1){
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
   }
   p:nth-child(2){
   font-size: 13px;
white-space: nowrap;
 text-overflow: ellipsis;
overflow: hidden; //隐藏文字
   }
  }
  .right{
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  }
}

</style>
